import { createRouter, createWebHashHistory } from 'vue-router'

// 公共布局组件
import Layout from '@/views/Layout'
// 首页 (公共布局下的第一个子路由)
import Home from '@/views/Home'
import Category from '@/views/Category'
import SubCategory from '@/views/Category/sub.vue'
import Goods from '@/views/Goods'
const Login = () => import('@/views/Login')
const Test = () => import('@/views/Test')
// 登录QQ的回跳页面
const LoginCallback = () => import('@/views/Login/callback.vue')
// 购物车
const Cart = () => import('@/views/Cart')
// 下单
const Settlement = () => import('@/views/Member/settlement')
const Order = () => import('@/views/Member/order')

// 路由配置数组
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home
      },
      // 一级分类页 (动态路由)
      {
        path: '/category/:id',
        component: Category
      },
      // 二级分类页面
      {
        path: '/category/sub/:id',
        component: SubCategory
      },
      //  商品详情
      {
        path: '/goods/:id',
        component: Goods
      },
      // 购物车页面
      {
        path: '/cart',
        component: Cart
      },
      // 下单
      {
        path: '/settlement',
        component: Settlement
      },
      {
        path: '/order',
        component: Order
      }
    ]
  },
  // 登录
  {
    path: '/login',
    component: Login
  },
  {
    path: '/login/callback',
    component: LoginCallback
  },
  // 测试
  {
    path: '/test',
    component: Test
  }
]

// 创建路由实例
// vue3创建路由router实例，使用createRouter()
const router = createRouter({
  // 使用 hash 方式实现路由
  history: createWebHashHistory(), // createWebHashHistory() hash模式（兼容性好） | createWebHistory() history模式路由
  // 配置路由规则
  routes
})

export default router
